<template>
	<view class="model">
		<view class="models" v-for="(item, index) in phone" :key="index">
			<view class="models-top">{{item.name}}</view>
			<view class="models-series">
				<view class="models-series-s" v-for="(iten, indez) in seriesss[index]" :key="indez">
					<image :src="iten.imgUrl" class="models-series-simage">
					<text class="models-series-span">{{iten.seriesName}}系列</text>
				</view>
				<view class="models-series-s">
					<image src="../../../static/img/model/xiaomi/Global.png" class="models-series-simage">
					<view class="models-series-span">Global</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import model from '../../model.js'
export default{
	name: 'plateModel',
	data() {
		return{
			phones: model,
			phone: []
		}
	},
	computed:{
		seriesss: function() {
			var sss = [];
			for(var i=0;i<this.phone.length;i++)
			{
				sss.splice(i,0,this.phone[i].series);
				// console.log(sss);
			}
			return sss;
		}
	},
	mounted() {
		this.phone = this.phones.phones;
		// console.log(this.phone);
		// this.getData();
	},
	methods: {
		// getData() {
		// 	uni.request({
		// 		url: '../../static/mock/model.json',
		// 		success: (res) => {
		// 			this.phone = res.data.phone;
		// 		}
		// 	})
		// }
	}
}
</script>

<style>
	.model{
		margin-top: 10px;
	}
	.models{
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 5px;
		margin-bottom: 15px;
		border: 1px solid rgb(239,239,239,0.5);
	}
	.models-top{
		margin-left: 15px;
		height: 30px;
		font-size: 14px;
		color: #6E6E6E;
		font-weight: 550;
		display: flex;
		align-items: flex-end;
	}
	.models-series{
		margin-right: 10px;
		margin-top: 10px;
		margin-left: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	.models-series-s{
		height: 80px;
		width: 50px;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.models-series-simage{
		width: 45px;
		height: 60px;
	}
	.models-series-span{
		width: 70px;
		height: 20px;
		font-size: 12px;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		font-weight: 550;
	}
</style>
